<template>
	<!-- :rules="(formState === 'write' && item.rules) || []" -->
	<el-form-item
		v-if="formState !== 'hidden'"
		:label="label || item.label"
		:prop="rulesProp || item.rulesProp || item.prop"
		:rules="rules"
		:class="[
			formState == 'write'
				? 'writeBox'
				: formState == 'readonly'
				? 'readBox'
				: '',
			fromType == 'tableCloumns'
				? 'tableCloumnsBox'
				: fromType == 'formItems'
				? 'formItemsBox'
				: '',
			'span' in item ? 'span' : '',
			'formItem',
		]"
		:style="{
			..._formitemPrototypeStyle,
		}"
		v-bind="item.formitemPrototype">
		<!-- gridColumnStart: `span ${item.gridSpan || 1} `, -->
		<Content
			v-model="formData"
			:FormItem="item"
			:state="formState"
			:fitContent="fitContent"
			v-bind="$attrs"
			:index="index"
			:showOverflowTooltip="false"
			:fromType="fromType">
			<template v-for="(value, name) in $slots" #[name]>
				<slot :name="name"></slot>
			</template>
			<template v-for="(value, name) in $scopedSlots" #[name]="scope">
				<slot
					:name="name"
					:row="scope.row"
					:[`$index`]="scope.$index"></slot>
			</template>
		</Content>
	</el-form-item>
</template>
<script>
	import Upload from '@/components/FileUpload/pictureCard.vue';
	import Content from '@/views/finance/reimburs/content';
	export default {
		name: '',
		components: { Upload, Content },
		mixins: [],
		props: {
			value: {
				type: Object,
				default: () => ({}),
			},
			FormItem: {
				type: Object,
				default: () => {},
			},
			state: {
				required: false,
				type: String,
				default: 'write',
			},

			label: { required: false, type: String },
			rulesProp: { required: false, type: String },
			fitContent: {
				type: Boolean,
				default: false,
			},
			fromType: {
				required: false,
				type: String,
			},
			index: { required: false, type: Number },
		},
		data() {
			return {};
		},
		filters: {
			getSelectLabel(T, selectList, value) {
				if (!value) return '-';
				let values = '';
				if (typeof value == 'number') {
					values = value.toString().split(',');
				} else {
					values = value;
				}
				let word = '-';
				if (selectList?.length > 0) {
					let items = selectList.filter(item => {
						return values.includes(item.value || item.dictValue);
					});
					word = items.reduce((prev, next) => {
						return `${prev}${prev ? '，' : ''}${
							next.label ?? next.dictLabel
						}`;
					}, word);
				}
				return word;
			},
		},

		computed: {
			item: {
				get() {
					// return this.useVModel.call(this, this.FormItem, "FormItem");
					return this.FormItem;
				},
				set(val) {
					this.$emit('FormItem', val);
				},
			},
			formData: {
				get() {
					// return this.value;
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('formData', val);
				},
			},
			_show() {
				let show = true;
				if (Reflect.has(this.FormItem, 'show')) {
					if (typeof this.FormItem.show == 'function') {
						show = this.FormItem.show();
					} else if (typeof this.FormItem.show == 'boolean') {
						show = this.FormItem.show;
					} else {
						show = !!this.FormItem.show;
					}
				}
				return show;
			},
			formState() {
				// return this?.item?.state ?? this.state;
				let state = 'disabled';

				if (this._show == false) {
					state = 'hidden';
				} else {
					if (typeof this.item.state == 'function') {
						state = this?.item?.state?.(this.formData, this.index);
					} else {
						state = this?.item?.state ?? this.state;
					}
				}
				return state;
			},
			_type() {
				let type = 'text';
				if (
					Object.prototype.toString.call(this.item.type) ==
					'[object String]'
				) {
					type = this.item.type;
				}
				if (
					Object.prototype.toString.call(this.item.type) ==
					'[object Function]'
				) {
					type = this.item.type(this.formData, this.index);
				}
				return type;
			},
			rules() {
				let rule = [];
				if (!Reflect.has(this.item, 'type')) return rule;
				let type =
					Object.prototype.toString.call(this.item.type) ==
					'[object String]'
						? this.item.type
						: this.item.type(this.index);
				let rules;
				if (
					typeof this.item?.rules == 'boolean' &&
					this.item?.rules == true
				) {
					rules = this.item.rules;
				} else if (typeof this.item?.rules == 'function') {
					rules = this.item?.rules?.(this.formData, this.index);
				} else if (
					Object.prototype.toString.call(this.item?.rules) ==
						'[object Array]' &&
					this.item?.rules?.length > 0
				) {
					rules = this.item.rules;
				} else {
					rules = [];
				}

				if (typeof rules == 'boolean') {
					if (rules == true) {
						let trigger =
							type.includes('input') || type === 'textarea'
								? 'blur'
								: 'change';
						let message_type =
							type.includes('input') || type === 'textarea'
								? '输入'
								: '选择';
						let message_label = this.item?.label?.replace(
							/(选择|输入)/g,
							'',
						);
						let obj = {
							required: true,
							message: `请${message_type}${message_label}`,
							trigger,
						};
						rule.push(obj);
					} else {
						rule = [];
					}
				} else {
					rule = rules;
				}

				if (
					this.formState == 'readonly' ||
					this.formState == 'disabled' ||
					this._type == 'text' ||
					!Reflect.has(this.item, 'type')
				) {
					return [];
				} else {
					return rule;
				}
			},
			eventType() {
				return this.FormItem?.event?.type ?? 'blur';
			},
			eventCb() {
				return this.FormItem?.event?.cb ?? this.cb;
			},
			_formitemPrototypeStyle() {
				return this.item?.formitemPrototype?.style ?? {};
			},
		},
		watch: {
			_show: {
				handler(val, oldVal) {
					if (
						val === false &&
						oldVal === true &&
						'show' in this.item
					) {
						if (
							this.notEmpty(this.formData) &&
							this.notEmpty(this.item.prop)
						) {
							this.$set(this.formData, this.item.prop, void 0);
						}
						if (
							this.notEmpty(this.formData) &&
							this.notEmpty(this.item.propLabel)
						) {
							this.$set(
								this.formData,
								this.item.propLabel,
								void 0,
							);
						}
					}
				},
			},
		},
		mounted() {},
		methods: {
			getState(item) {
				let state = 'disabled';
				let show = true;
				if (Reflect.has(item, 'show')) {
					if (typeof item.show == 'function') {
						show = item.show();
					} else if (typeof item.show == 'boolean') {
						show = item.show;
					} else {
						show = !!item.show;
					}
				}
				if (show === false) {
					state = 'hidden';
				} else {
					if (typeof item.state == 'function') {
						state = item?.state?.(this.formData);
					} else {
						state = item?.state ?? this.formState;
					}
				}
				return state;
			},
			cb() {},
			select_dialog(item, row, cb) {
				if ('selectDialogValidate' in item) {
					if (!item.selectDialogValidate()) return;
				}
				this.$refs.selectDialogInput.blur();
				this.$SelectDialog(item.selectDialogParams).then(res => {
					item?.cb(row, res);
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.tableCloumnsBox {
		margin-bottom: 0;
		// margin-top: 22px;
	}
	.readBox {
		margin: 0 !important;
	}
	.formItem {
		::v-deep .el-form-item__content {
			min-width: 0;
		}
	}
</style>
